<template>
  <div class="container">
    <div class="content-title">支持上传 JSON 文件或手动输入 JSON 数据</div>

    <el-upload
        class="upload-demo"
        drag
        action=""
        :show-file-list="false"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        上传 JSON 文件
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- JSON 输入框容器 -->
    <div class="json-inputs-container">
      <!-- 实体 JSON 输入框和提交按钮 -->
      <div class="json-input-area">
        <div class="json-section-title">输入实体 JSON</div>
        <textarea
            v-model="entityJsonInput"
            placeholder="请输入实体 JSON 数据"
            rows="10"
            cols="50"
        ></textarea>
        <el-button type="primary" @click="handleEntityJsonSubmit">提交实体 JSON</el-button>
      </div>

      <!-- 关系 JSON 输入框和提交按钮 -->
      <div class="json-input-area">
        <div class="json-section-title">输入关系 JSON</div>
        <textarea
            v-model="relationshipJsonInput"
            placeholder="请输入关系 JSON 数据"
            rows="10"
            cols="50"
        ></textarea>
        <el-button type="primary" @click="handleRelationshipJsonSubmit">提交关系 JSON</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import {importEntities, importRelationships} from '@/api/neo4j';
import { UploadFilled } from "@element-plus/icons-vue";
import { ref } from "vue";

const entityJsonInput = ref('');
const relationshipJsonInput = ref('');

const handleEntityJsonSubmit = async () => {
  try {
    const entityArray = JSON.parse(entityJsonInput.value); // ['链表', '数据链路层']
    if (!Array.isArray(entityArray)) {
      throw new Error('实体数据必须是数组');
    }
    await importEntities(entityArray);
    ElMessage.success('实体批量导入成功！');
  } catch (error) {
    console.error('实体导入失败:', error);
    ElMessage.error('实体导入失败，请检查 JSON 格式或后端接口');
  }
};

const handleRelationshipJsonSubmit = async () => {
  try {
    // 解析输入框中的 JSON 数据
    const relationshipJsonData = JSON.parse(relationshipJsonInput.value);

    if (!Array.isArray(relationshipJsonData) || relationshipJsonData.length === 0) {
      ElMessage.warning('请输入有效的关系 JSON 数据');
      return;
    }
    // 调用后端接口，批量导入关系数据
    await importRelationships(relationshipJsonData);
    ElMessage.success('实体批量导入成功！');
  } catch (error) {
    console.error('关系 JSON 解析或导入失败:', error);
    ElMessage.error('关系导入失败，请检查 JSON 格式或后端接口');
  }
};


</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  padding: 20px;
}

.content-title {
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}

.upload-demo {
  margin: 0 auto;
}

.json-inputs-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
}

.json-input-area {
  flex: 1;
  min-width: 300px;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
}

.json-input-area textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
}
</style>